<template>
  <div id="app">

    <!-- ref属性：被用来给元素或子组件注册引用信息，代替id
    用在html标签上获取的是真实DOM元素，用在组件上是组件的实例对象vc -->
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
// 引入自定义组件
import School from './components/School.vue'

export default {
  name: 'App',
  components: {
    School
  },
  data() {
    return {
      msg: '欢迎学习Vue',
    }
  },
  methods: {
    showDOM() {
      // 上面页面标签中已经都引入到了ref中，这里就拿到了所有对应的标签
      console.log(this.$refs.title);
      console.log(this.$refs.btn);
      console.log(this.$refs.sch);
    }
  }
}
</script>


